@import '../vars.scss';

.search {
  background-color: #fff;
  border-bottom: solid 1px #c5c1c1;
  .container {
    display: grid;
    grid-template-columns: 200px auto 200px;
    align-items: center;
    padding: 1rem 0 0;
    main {
      .search-cart {
        display: grid;
        grid-template-columns: auto 120px;

        gap: 1rem;
        .box {
          .form {
            display: grid;
            grid-template-columns: 1fr 50px;
            grid-template-rows: 30px;
            border: solid 3px #c0392b;
            input {
              border: none;
              outline: none;
            }
            .btn {
              display: grid;
              justify-content: center;
              align-content: center;
              background-color: #c0392b;
              color: #fff;
              cursor: pointer;
              i.fa {
                font-size: 1.2rem;
              }
              &:hover {
                background-color: #a12f23;
              }
            }
          }
          .keywords {
            margin-top: 10px;
            a {
              color: $fontColor;
              margin-right: 0.5rem;
              &.active {
                color: #c0392b;
              }
            }
          }
        }
        .cart {
          border: solid 1px #ddd;
          padding: 0.5rem;
          color: #c0392b;
          display: grid;
          grid-template: 1fr / repeat(2, auto);
          font-size: 0.8rem;
          align-self: start;
          &:hover {
            border: solid 1px $redColor;
            cursor: pointer;
          }
          // height: 30px;
          .icon {
            position: relative;
            i.fa {
              font-size: 1.2rem;
            }
            span {
              position: absolute;
              background-color: $redColor;
              color: #fff;
              font-size: 12px;
              border-radius: 40%;
              min-width: 20px;
              text-align: center;
              right: 2px;
              top: -10px;
              transform: scale(0.8);
            }
          }
        }
      }
      nav {
        transform: translateY(15px);
        a {
          font-size: 1rem;
          color: #666;
          margin-right: 1.2rem;
          &.active {
            color: $redColor;
          }
        }
      }
    }
  }
}
